<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :href="symbolId"></use>
  </svg>
</template>

<script setup>
import {computed} from "vue";

const props = defineProps({
  icon: {
    // 强制要求,需要加入 icon 属性指定名字
    type: String,
    required: true
  }
})

const symbolId = computed(() => {
  // icon- 命名必须和 vite.config.js 的 symbolId 匹配
  return `#icon-${props.icon}`
})

</script>

<style lang="scss" scoped>
.svg-icon {
  // 1em 表示当前文字的默认大小
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  // 填充色
  fill: currentColor;
  // 溢出隐藏
  overflow: hidden;
}
</style>